<script setup>
import {ref, reactive} from 'vue'
import {uploadUrl} from "@/api";
import { addTrain, modifyTrain, getTrainDetail } from "@/api/train";
import Uploader from "@/components/uploader.vue";
import {host} from "@/utils/config";
import {onLoad} from "@dcloudio/uni-app";
import SelectDate from "@/components/selectDate.vue";

const userInfo = uni.getStorageSync('userInfo')
const dict = reactive({})
const formData = ref(null)
const pageData = reactive({
  formData: {
    signInTable: [],
    courseware: [],
    result: []
  },
  checkInfoList: []
})
const formRule = {
  trainTheme: [
    {
      required: true,
      message: '请填写培训主题'
    }
  ]
}

const loadingBtn = ref(false)
const submit = () => {
  console.log('pageData.formData', pageData.formData)
  formData.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('pagedata', pageData.formData)
      pageData.formData.fileList = []
      pageData.formData.fileList = [
        ...pageData.formData.signInTable || [],
        ...pageData.formData.courseware || [],
        ...pageData.formData.result || []
      ]
      console.log('pagedata', pageData.formData)
      loadingBtn.value = true
      let api
      let msg = ''
      if (pageData.formData.id) {
        api = modifyTrain
        msg = '更新成功！'
      } else {
        api = addTrain
        msg = '新增成功！'
      }
      api(pageData.formData).then(res => {
        console.log('create', res)
        uni.showToast({
          title: msg
        })
        uni.navigateBack()
      }).catch(err => {
        loadingBtn.value = false
      })
    }
    else {
      console.log('error submit!!', errors)
      uni.showToast({
        title: errors[0].message,
        icon: 'error'
      })
    }
  })
}

const detailId = ref('')
const loading = ref(false)
onLoad((options) => {
  if(options.id) {
    detailId.value = options.id
    getDetail(detailId.value)
    return
  }
})

const getDetail = async(id) => {
  loading.value = true
  await getTrainDetail(id).then(res => {
    pageData.formData = res.data
    pageData.formData.signInTable = []
    pageData.formData.courseware = []
    pageData.formData.result = []
    console.log('res.data', res.data)
    console.log('formData', pageData.formData)
    for(let i = 0; i < pageData.formData.fileList.length; i++) {
      const fileItem = pageData.formData.fileList[i]
      if (!fileItem.fileUrl) continue
      const tmpArr = fileItem.fileUrl.split('/')
      fileItem.name = tmpArr[tmpArr.length - 1]
      const tmpArr1 = fileItem.name.split('.')
      fileItem.extname = tmpArr1[tmpArr1.length - 1]
      fileItem.url = host + fileItem.fileUrl
      if (pageData.formData.fileList[i].fileType === 1) {
        pageData.formData.signInTable = [
            ...pageData.formData.signInTable,
            ...[fileItem]
        ]
      }
      if (pageData.formData.fileList[i].fileType === 2) {
        pageData.formData.courseware = [
          ...pageData.formData.courseware,
          ...[fileItem]
        ]
      }
      if (pageData.formData.fileList[i].fileType === 3) {
        pageData.formData.result = [
          ...pageData.formData.result,
          ...[fileItem]
        ]
      }
    }
    loading.value = false
    console.log('formData1', pageData.formData)
  })
}

</script>

<template>
  <nut-loading-page :loading="loading" />
  <div class="form">
    <nut-form :model-value="pageData.formData" ref="formData" class="form" :rules="formRule">
      <nut-form-item label="培训地点" prop="address" label-width="70">
        <nut-input v-model="pageData.formData.address" />
      </nut-form-item>
      <nut-form-item label="培训时间" prop="trainTime" label-width="70">
        <select-date v-model="pageData.formData.trainTime"></select-date>
      </nut-form-item>
      <nut-form-item label="培训对象" prop="trainObject" label-width="70">
        <nut-input v-model="pageData.formData.trainObject" />
      </nut-form-item>
      <nut-form-item label="培训主题" prop="trainTheme" label-width="70">
        <nut-input v-model="pageData.formData.trainTheme" />
      </nut-form-item>
      <nut-form-item label="培训师资" prop="trainTeachers" label-width="70">
        <nut-input v-model="pageData.formData.trainTeachers" />
      </nut-form-item>
      <nut-form-item label="培训学时" prop="trainHours" label-width="70">
        <nut-input v-model="pageData.formData.trainHours" />
      </nut-form-item>
      <nut-form-item label="签到表" prop="signInTable" label-width="70">
        <uploader v-model="pageData.formData.signInTable" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="1" :limit="3"></uploader>
      </nut-form-item>
      <nut-form-item label="培训课件" prop="courseware" label-width="70">
        <uploader v-model="pageData.formData.courseware" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="2" :limit="3"></uploader>
      </nut-form-item>
      <nut-form-item label="考评结果" prop="result" label-width="70">
        <uploader v-model="pageData.formData.result" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="3" :limit="3"></uploader>
      </nut-form-item>
    </nut-form>
  </div>
  <nut-cell>
    <nut-button type="primary" block @click="submit">提交</nut-button>
  </nut-cell>
  <nut-safe-area position="bottom" />
</template>

<style scoped lang="scss">
.form{padding: 0 10px;}
</style>
